<template>
    <div>
        <el-input v-model:content="content" @add="add"></el-input>

        {{content}}

        <el-list :list="list" @del="del"></el-list>
    </div>
</template>

<script lang="ts">
import {defineComponent,ref} from 'vue';
import ElInput from './components/elInput.vue';
import ElList from './components/elList.vue';

interface InterItem{
    id:number,
    content:string
}
export default defineComponent({
    components:{
        ElInput,
        ElList
    },
    setup(){
        let content = ref('');

        let list = ref<InterItem[]>([]);

        //添加
        let add = () => {
            list.value.push({
                id:+new Date(),
                content:content.value
            })
        }

        //删除
        let del = (index:number) => {
            list.value.splice(index,1);
        }

        return {
            content,
            list,
            add,
            del
        }
    }
})
</script>